<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>修改便民电话</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <link href="${pageContext.request.contextPath}/static/css/common.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/layer/skin/layer.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/css/bootstrap.min.css"
          rel="stylesheet">
          <link href="${pageContext.request.contextPath}/static/plugins/select2-4.0.0/dist/css/select2.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/font-awesome-4.3.0/css/font-awesome.min.css"
          rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/jquery.time/jquery.timepicker.min.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/plugins/multiselect/jquery.multiselect.css" />
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/plugins/multiselect/jquery.multiselect.filter.css" />
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/plugins/multiselect/assets/style.css" />
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/plugins/multiselect/assets/prettify.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/jquery-ui.css" />
   
    	<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-ui.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="/static/plugins/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/layer/layer.js" type="text/javascript"></script>
	<script src="${pageContext.request.contextPath}/static/plugins/select2-4.0.0/dist/js/select2.min.js"></script>
	<script src="${pageContext.request.contextPath}/static/plugins/My97DatePicker/WdatePicker.js"
        type="text/javascript"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/global.js"></script>
	<script src="${pageContext.request.contextPath}/static/js/jquery.form.js" type="text/javascript"></script>
	<script src="${pageContext.request.contextPath}/static/js/common.js?date=2016-11-25"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/multiselect/jquery.multiselect.js?date=0112"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/multiselect/jquery.multiselect.filter.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/multiselect/assets/prettify.js"></script>
<style type="text/css">
        .divDistribute{
        	height:300px;
    		overflow-y: auto;
        }
        .divDistributeAgt{
        	height:100px;
    		overflow-y: auto;
        }
        .border{
               border: 1px solid #eeeeee;
        }
        .tdborder{
               border: 1px solid #eeeeee;
               height: 32px;
               padding: 5px 8px 0px 8px !important;
               width: 35%;
               text-align: left;
               color: #666;
    		   font-size: 14px;
        }
        .tdborder2{
               border: 1px solid #eeeeee;
               padding:0px !important;
        }
        .tdborder3{
               border: 1px solid #eeeeee;
               height: 32px;
               padding: 5px 8px 0px 8px !important;
               width: 20%;
               text-align: left;
               color: #666;
    		   font-size: 14px;
        }
		.jqGrid_wrapper{*+margin-left:270px;}
	
		.lt,.col-sm-3,.col-sm-8{float:left}
		.form-group{*+overflow:hidden;}
		.form-group label{width:28%\9;*+width:20%;text-align:right\9;*+text-align:right;}
		.col-sm-8 .m-t2 {width:30%\9; *+width:36%;}
		.form-group .col-sm-8{width:66%\9;*+width:66%;}
		.form-group .form-control{*+width:95%;}
		#sub{*+margin-right:10px;}
		 .btn-primary{*+width:100px;}
    </style>
</head>
<body view="menu-item-4142">
<jsp:include page="../../top.jsp"></jsp:include>
<div class="right">
    <div class="jqGrid_wrapper">
        <div id="jqGrid_operation" class="jg-grid">
            <h1>修改便民电话</h1>
            <div class="jqGrid_operation" id="action"></div>
        </div>

        <div class="col-sm-12">
		    <form class="form-horizontal m-t" method="post" id="form">
		        <input type="hidden" name="sid" value="${lifeTel.sid}">
		        <input type="hidden" name="pic" id="pic" />
		        <input type="hidden" name="acceptAgtCode" id="acceptAgtCode"  value="${lifeTel.acceptAgtCode}"/>
		        <input type="hidden" name="acceptCommunityId" id="acceptCommunityId" value="${lifeTel.acceptCommunityId}"/>
		        <div class="form-group">
		            <label class="col-sm-3 control-label"><i class="require">*</i>排序（APP）:</label>
		            <div class="col-sm-8">
		                <select name="priority" id="priority" class="select2">
		                    <option value="1">1</option>
		                    <option value="2">2</option>
		                    <option value="3">3</option>
		                    <option value="4">4</option>
		                    <option value="5">5</option>
		                    <option value="6">6</option>
		                    <option value="7">7</option>
		                    <option value="8">8</option>
		                    <option value="9">9</option>
		                    <option value="10" selected = "selected">10</option>
		                </select>
		            </div>
		        </div>
		        <div class="form-group">
		            <label class="col-sm-3 col-sm-3 control-label">图标:</label>
		            <div class="col-sm-8">
		                <div class="input-group">
		                    <a class="btn btn-primary" onclick="picCut()">上传图片并裁剪</a>
		                    <font style="margin-left: 20px;">支持jpg,png等图片格式，小于2M</font>
		                </div>
		            </div>
		        </div>
		        <div class="form-group">
		            <label class="col-sm-3 control-label"><i class="require">*</i>服务名称:</label>
		            <div class="col-sm-8">
		                <input class="form-control" name="cName" id="cName" placeholder="服务名称字数不大于8" maxlength="8" size="30" value="${lifeTel.cName}"/>
		            </div>
		        </div>
		        
		        <div class="form-group">
		            <label class="col-sm-3 col-sm-3 control-label">地址:</label>
		            <div class="col-sm-8">
		                <input class="form-control" name="addr" id="addr" placeholder="地址字数不大于20" maxlength="20" size="30" value="${lifeTel.addr}"/>
		            </div>
		        </div>
		         <div class="form-group">
		            <label class="col-sm-3 col-sm-3 control-label"><i class="require">*</i>服务说明:</label>
		            <div class="col-sm-8">
		                <input class="form-control" name="intro" id="intro" placeholder="服务名称字数不大于25" maxlength="25" size="30" value="${lifeTel.intro}"/>
		            </div>
		        </div>
		        <div class="form-group">
		            <label class="col-sm-3 col-sm-3 control-label"><i class="require">*</i>电话:</label>
		            <div class="col-sm-8">
		                <input class="form-control" name="tel1" id="tel1" size="30" value="${lifeTel.tel1}"/>
		            </div>
		        </div>
		        <div class="form-group">
		            <label class="col-sm-3 col-sm-3 control-label">电话:</label>
		            <div class="col-sm-8">
		                <input class="form-control" name="tel2" id="tel2" size="30" value="${lifeTel.tel2}"/>
		            </div>
		        </div>
		        <c:if test="${userRole != 5 && userRole != 6}">
			        <div class="form-group">
			            <label class="col-sm-3 col-sm-3 control-label">添加资源:</label>
			            <div class="col-sm-8">
			                <div class="col-sm-2 m-t2 lt">
			                    <input type="radio" checked name="acceptRange" size="30" value="0"/><label>全部小区</label>
			                </div>
			                <div class="col-sm-2 m-t2 lt">
			                    <input type="radio" name="acceptRange" size="30" value="2"/><label>部分小区</label>
			                </div>
			            </div>
			        </div>
			      	<div class="form-group" id="mTypeDiv">
			      	 <label class="col-sm-3 col-sm-3 control-label"></label>
			            	<c:if test="${userRole == 1 || userRole == 2  || userRole == 21}">
				            	<div class="col-sm-8 divDistribute" >
			            	</c:if>
			            	<c:if test="${userRole == 3 || userRole == 4}">
			            		<div class="col-sm-8 divDistributeAgt" >
			            	</c:if>
				            	<table id="agtTable" class="table border">
				            	</table>
				            </div>
			        </div>
		        </c:if>
		        <div class="form-group">
		            <label class="col-sm-3 col-sm-3 control-label">备注:</label>
		            <div class="col-sm-8">
		                <input class="form-control" name="remark" size="30" value="${lifeTel.remark}"/>
		            </div>
		        </div>
		        
		    </form>
		</div>
		<div style="text-align: center;">
         <button class="btn btn-success form-control" id="sub" onclick="checkTail()" style="width: 150px;">提交</button>
         <button class="btn btn-success form-control" id="cancel" onclick="cancel()" style="width: 150px;">取消</button>
     	</div>
    </div>
</div>

<script>

	$(function () {
		$("#priority").select2({
            "placeholder": "请选择社区",
            "width": "100%"
        })
        $("#priority").val('${lifeTel.priority}');
        if('${userRole}' == '1' || '${userRole}' == '2'){
        	if('${lifeTel.acceptRange}' == '0'){//全部
    	        $("input[name='acceptRange'][value='0']").attr("checked", true);
    	        $("#mTypeDiv").attr("style","display:none");
            }else{//部分小区
            	$("input[name='acceptRange'][value='2']").attr("checked", true);
            	$("#mTypeDiv").attr("style","");
            	distribute();
            }
        }else if('${userRole}' == '3' || '${userRole}' == '4'){
        	if('${lifeTel.acceptRange}' == '1'){//全部
    	        $("input[name='acceptRange'][value='0']").attr("checked", true);
    	        $("#mTypeDiv").attr("style","display:none");
            }else{//部分小区
            	$("input[name='acceptRange'][value='2']").attr("checked", true);
            	$("#mTypeDiv").attr("style","");
            	distribute();
            }
        }
        
        
        $('input:radio[name="acceptRange"]').change( function(){
        	var value = $("input[name='acceptRange']:checked").val();
        	if(value == 0){//全部
        		$("#mTypeDiv").attr("style","display:none");
            }else{//部分小区
            	$("#mTypeDiv").attr("style","");
            	distribute();
            }
        });
	});
    function cancel(){
    	window.location.href = "${pageContext.request.contextPath}/admin/lifeTel_listView.action";
    }
    function picCut(){
    	layer.open({
            type: 2,
            title: ['图片裁剪', 'font-weight:bold'],
            shadeClose: true, //点击遮罩关闭层
            scrollbar: false,
            area: ['1000px', '650px'],
            content: '${pageContext.request.contextPath}/admin/lifeResource_picView.action?path=lifeTel',
            btn: ['确定', '取消'],
            yes: function (index, layero) {
                var options = {
                    success: function (data) {
                        data = JSON.parse(data);
                        if (data.code == 1) {
               				$("#pic").val(data.content);
                            layer.alert(data.msg);
                            layer.close(index);
                        } else {
                            layer.alert(data.msg);
                        }
                    }
                };
				 $("#layui-layer-iframe" + index).contents().find("#getData").click();
				 $("#layui-layer-iframe" + index).contents().find("#form").ajaxForm(options);
	             $("#layui-layer-iframe" + index).contents().find("#form").submit();
// 				 $("#layui-layer-iframe" + index).contents().find("#sure").click(); 
            },
            cancel: function (index) {
                layer.close(index);
            }
        });
    }
    
    function checkTail(){
		$("#sub").attr("disabled", "true");
		var cName = $("#cName").val();
	    var intro = $("#intro").val();
	    var tel1 = $("#tel1").val();
	    var tel2 = $("#tel2").val();
	    var formData = new FormData($("#form" )[0]); 
	    var acceptRange = $("input[name='acceptRange']:checked").val();
    	
// 	    if(!content){
// 	    	 alert("请选择图片并截图上传");
// 	    	 $("#sub").removeAttr("disabled");
// 	    	 return;
// 	    }
	    if(!cName){
	    	 alert("服务名称必填");
	    	 $("#sub").removeAttr("disabled");
	    	 return;
	    }
	    if(!intro){
	    	 alert("服务说明必填");
	    	 $("#sub").removeAttr("disabled");
	    	 return;
	    }
	    var reg =new RegExp("^1[3|4|5|7|8][0-9]{9}$");
	    var isTelePhone  =new RegExp("^([0-9]{3,4}-)?[0-9]{7,8}$");
	    var isTel  =new RegExp("^[0-9]{3,6}$");
        if(!tel1){
        	 alert("必须填一个联系电话");
	    	 $("#sub").removeAttr("disabled");
	    	 return;
        }else{
           	if(!(reg.test(tel1) || isTelePhone.test(tel1) || isTel.test(tel1))){
	           	alert("所填第一个电话格式错误");
		    	$("#sub").removeAttr("disabled");
		    	return;
           	}
        }
        if(tel2){
           	if(!(reg.test(tel2) || isTelePhone.test(tel2) || isTel.test(tel2))){
	           	alert("所填第二个电话格式错误");
		    	$("#sub").removeAttr("disabled");
		    	return;	
           	}
        }
        var agtNow = $("#acceptAgtCode").val();
        var comuNow = $("#acceptCommunityId").val();
        if(('${userRole}'!=5 && '${userRole}'!=6) && acceptRange != 0 && (agtNow =='' && comuNow =='')){//全部
        	alert("请选择添加资源范围的公司或者小区");
        	$("#sub").removeAttr("disabled");
        	return;	
        }
        
        $.ajax({  
            url: '${pageContext.request.contextPath}/admin/lifeTel_update.action' ,  
            type: 'POST',  
            data: formData,  
            async: false,  
            cache: false,  
            contentType: false,  
            processData: false,  
            success: function (result) {  
                 result = JSON.parse(result)
                 if (result.code == 1) {
                	 window.location.href = "${pageContext.request.contextPath}/admin/lifeTel_listView.action";
                 }else{
                	 $("#sub").removeAttr("disabled");
                 	layer.alert(result.msg);
                 }
            },  
            error: function (returndata) {  
                alert(returndata);  
            }  
       }); 
	    
	}
	
    //点击部分小区后查询小区
    function distribute(){
   	 var table=$("#agtTable");
		  table.empty();
		  $.post("${pageContext.request.contextPath}/admin/lifeTel_listAgt.action", function (data) {
	            for (var i = 0; i < data.length; i++) {
		            var tr=$("<tr></tr>");
		   			tr.appendTo(table);
		   			var td=$("<td class=\"tdborder\">"+data[i].AGTNAME+"</td>");
		   			td.appendTo(tr);
		   			var tds = $("<td class=\"tdborder2\"><input id='comuAll"+data[i].AGTCODE+"' value='"+data[i].CSID+"' type=\"hidden\"/></td>");
		   			tds.appendTo(tr);
		   			var tdSelect=$("<select id='"+data[i].AGTCODE+"' multiple='multiple' style='width:372px;'></select>");
		   			tdSelect.appendTo(tds);
		   			var strBuffer = new StringBuffer(); 
					if(data[i].CSID != null){
						var arrSid = data[i].CSID;
						arrSid = arrSid.substring(0,arrSid.length-1).split(",");
						var arrName = data[i].CCOMUNAME;
						arrName = arrName.substring(0,arrName.length-1).split(",");
						for (var j = 0; j < arrSid.length; j++) {
							strBuffer.append("<option value='");
							strBuffer.append(arrSid[j]);
							strBuffer.append("'>");
							strBuffer.append(arrName[j]);
							strBuffer.append("</option>");
						}
					}
					if(strBuffer.toString() != ""){
						var option=$(strBuffer.toString());
						option.appendTo(tdSelect);
					}
					//1.平台上架的全局分配，无需默认选择
					//2.合作方上架的的全局分配，无需默认选择
					//3.社区上架不显示
					//4.部分小区做默认选择。
					var td;
					if('${userRole}' == '1' || '${userRole}' == '2'){
						if('${lifeTel.acceptRange}' == '0'){
							initComunity(data[i].CSID,data[i].AGTCODE,td,tr);
						}else if('${lifeTel.acceptRange}' == '1'){//合作方上架的的全局分配
							//比对合作方。
							if('${lifeTel.acceptAgtCode}'.indexOf(","+data[i].AGTCODE+",") !=-1){
								if(data[i].CSID != null){
									compareAgt(data[i].CSID,data[i].AGTCODE,td,tr);
								}else{
									zeroComunity(td,tr,data[i].AGTCODE);
								}
							}else{
								compareCommunity(data[i].CSID,data[i].AGTCODE,td,tr);
							}
						}else if('${lifeTel.acceptRange}' == '2'){
// 	 						if('${lifeTel.dType}' == '1'){//平台上架部分
								//比对合作方。
								if('${lifeTel.acceptAgtCode}'.indexOf(","+data[i].AGTCODE+",") !=-1){
									if(data[i].CSID != null){
										compareAgt(data[i].CSID,data[i].AGTCODE,td,tr);
									}else{
										zeroComunity(td,tr,data[i].AGTCODE);
									}
								}else if(data[i].CSID != null){
									//比对小区
									compareCommunity(data[i].CSID,data[i].AGTCODE,td,tr);
								}else{
									zeroComunity(td,tr,data[i].AGTCODE);
								}
// 	 						}else{//合作方或者社区上架部分
// 	 							compareCommunity(data[i].CSID,data[i].AGTCODE,td,tr);
// 		 					}
						}
					}else if('${userRole}' == '3' || '${userRole}' == '4'){
						if('${lifeTel.acceptRange}' == '2'){
	 						compareCommunity(data[i].CSID,data[i].AGTCODE,td,tr);
						}else{
							initComunity(data[i].CSID,data[i].AGTCODE,td,tr);
						}
					}
	            }
	        }, "json");
   }
    //初始化无赋值
    function initComunity(csid,agtCode,td,tr){
    	if(csid != null){
    		var arrCsid=csid.split(",");
			td=$("<td class=\"tdborder3\" id='chose"+agtCode+"' >0个小区</td>");
			td.appendTo(tr);
   			$("#"+agtCode).multiselect({ 
   				selectedText: '共'+arrCsid.length+'个社区，# 个被选中',
   				ifChangeChoseRight:true,
   				beforeclose: function(event, ui){
					var id = event.target.id;
					$("#"+id+"").multiselect("update");
					getMultiVulue(id);
   				}
   				}).multiselectfilter();
		}else{
			zeroComunity(td,tr,agtCode);
		}
    }
    //初始化化
    function compareAgt(csid,agtCode,td,tr){
    	var arrCsid=csid.split(",");
		td=$("<td class=\"tdborder3\" id='chose"+agtCode+"' >"+arrCsid.length+"社区</td>");
		td.appendTo(tr);
			$("#"+agtCode).multiselect({ 
				selectedText: '共'+arrCsid.length+'个社区，# 个被选中',
				ifChangeChoseRight:true,
				beforeclose: function(event, ui){
					var id = event.target.id;
					$("#"+id+"").multiselect("update");
					getMultiVulue(id);
   				}
				}).multiselectfilter();
			$("#"+agtCode).multiselect("checkAll"); 
    }
    function compareCommunity(csid,agtCode,td,tr){
    	var arr = intersection(csid,'${lifeTel.acceptCommunityId}');
		if(csid != null){
			td=$("<td class=\"tdborder3\" id='chose"+agtCode+"' >"+arr.length+"个小区</td>");
			td.appendTo(tr);
   			$("#"+agtCode).val(arr);
   			$("#"+agtCode).multiselect({ 
   				selectedText: '共'+csid.split(",").length+'个社区，# 个被选中',
   				ifChangeChoseRight:true,
   				beforeclose: function(event, ui){
					var id = event.target.id;
					$("#"+id+"").multiselect("update");
					getMultiVulue(id);
   				}
   				}).multiselectfilter();
		}else{
			zeroComunity(td,tr,agtCode);
		}
    }
    //合作方下无社区
    function zeroComunity(td,tr,agtCode){
    	td=$("<td class=\"tdborder3\" id='chose"+agtCode+"' >0个社区</td>");
		td.appendTo(tr);
			$("#"+agtCode).multiselect({ 
				selectedText: '共0个社区，# 个被选中',
				ifChangeChoseRight:false
				}).multiselectfilter();
   	}
	//确定后的赋值到隐藏的input框
    function getMultiVulue(id){
    	var ifCheckAll = $("#"+id+"").multiselect("getIfCheckAll");
    	if(ifCheckAll){//全选，增加agtcode
        	//增加agtcode
        	var agtNow = $("#acceptAgtCode").val();
        	var newAgt = addNoRepeat(id,agtNow);
        	$("#acceptAgtCode").val(agtNow+newAgt);

        	//去除该合作方下的cumunityId
        	var comuNow = $("#acceptCommunityId").val();
        	var allComu = $("#comuAll"+id).val();
        	var newComu = offNoRepeat(allComu,comuNow);
        	$("#acceptCommunityId").val(newComu);
        }else{//不选或者部分选，去除agtcode
            //去除agtcode
            var agtNow = $("#acceptAgtCode").val();
            var newAgt = offNoRepeat(id,agtNow);
            $("#acceptAgtCode").val(newAgt);
            //去除该合作方下的cumunityId
        	var comuNow = $("#acceptCommunityId").val();
        	var allComu = $("#comuAll"+id).val();
        	var newComu = offNoRepeat(allComu,comuNow);
        	//部分选择的comunityId
	    	var valuestr = $("#"+id+"").multiselect("MyValues"); 
            if(valuestr ==''){
        		$("#acceptCommunityId").val(newComu);
            }else{
            	//新增部分cumunityId
            	var newComuAdd = addNoRepeat(valuestr,newComu);
            	$("#acceptCommunityId").val(newComu+newComuAdd);
            }
        }
    }
    function cancleMultiVulue(id){
    	$("#cancle"+id+"").click();
    }
    function ChangeChoseRightValue(id,chose){
	    $("#chose"+id+"").html(chose+"个社区");
    };
	

    	
</script>
</body>
</html>
